import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { Button } from 'antd';
import { connect } from "react-redux";

class Line extends Component {
    addLine () {
        const { viewer } = this.props;
        // 官方数据  仅供参考
        const czml = [ {
            "id" : "document",
            "name" : "CZML Geometries: Polyline",
            "version" : "1.0"
        },{
            "id" : "redLine",
            "name" : "Red line clamped to terain",
            "polyline" : {
                "positions" : {
                    "cartographicDegrees" : [
                        - 75,35,0,
                        - 125,35,0
                    ]
                },
                "material" : {
                    "solidColor" : {
                        "color" : {
                            "rgba" : [ 255,0,0,255 ]
                        }
                    }
                },
                "width" : 5,
                "clampToGround" : true
            }
        },{
            "id" : "blueLine",
            "name" : "Glowing blue line on the surface",
            "polyline" : {
                "positions" : {
                    "cartographicDegrees" : [
                        - 75,37,0,
                        - 125,37,0
                    ]
                },
                "material" : {
                    "polylineGlow" : {
                        "color" : {
                            "rgba" : [ 0,0,255,255 ]
                        },
                        "glowPower" : 0.2
                    }
                },
                "width" : 10
            }
        },{
            "id" : "orangeLine",
            "name" : "Orange line with black outline at height and following the surface",
            "polyline" : {
                "positions" : {
                    "cartographicDegrees" : [
                        - 75,39,250000,
                        - 125,39,250000
                    ]
                },
                "material" : {
                    "polylineOutline" : {
                        "color" : {
                            "rgba" : [ 255,165,0,255 ]
                        },
                        "outlineColor" : {
                            "rgba" : [ 0,0,0,255 ]
                        },
                        "outlineWidth" : 2
                    }
                },
                "width" : 5
            }
        },{
            "id" : "purpleLine",
            "name" : "Purple arrow at height",
            "polyline" : {
                "positions" : {
                    "cartographicDegrees" : [
                        - 75,43,500000,
                        - 125,43,500000
                    ]
                },
                "material" : {
                    "polylineArrow" : {
                        "color" : {
                            "rgba" : [ 148,0,211,255 ]
                        }
                    }
                },
                "arcType" : "NONE",
                "width" : 10
            }
        },{
            "id" : "dashedLine",
            "name" : "Blue dashed line",
            "polyline" : {
                "positions" : {
                    "cartographicDegrees" : [
                        - 75,45,500000,
                        - 125,45,500000
                    ]
                },
                "material" : {
                    "polylineDash" : {
                        "color" : {
                            "rgba" : [ 0,255,255,255 ]
                        }
                    }
                },
                "width" : 4
            }
        } ];
        const dataSourcePromise = Cesium.CzmlDataSource.load( czml );
        viewer.dataSources.add( dataSourcePromise );
        viewer.zoomTo( dataSourcePromise );
        console.log( viewer )
    }

    removeLine () {
        const { viewer } = this.props;
        viewer.dataSources.removeAll();
    }

    render () {
        return (
            <div className="btn">
                <Button onClick={ this.addLine.bind( this ) }>添加线</Button>
                <Button onClick={ this.removeLine.bind( this ) }>移除线</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer
});

export default connect( mapStateToProps,{} )( Line );